<!-- eslint-disable @typescript-eslint/indent -->
<!-- eslint-disable no-alert -->
<script setup lang="ts">
import { ref, computed } from 'vue';

const onClickToolbarItem = (itemId: string) => {
    alert(itemId);
};

const currentState = ref<string>('init');

function executeMethod($event: MouseEvent, method: string) {
    switch (method) {
        case 'add':
            currentState.value = 'adding';
            break;
        case 'edit':
            currentState.value = 'editing';
            break;
        default:
            currentState.value = 'init';
    }
    window.alert(`The button named ${method} is clicked.`);
}

const status = {
    canAdd: computed(() => currentState.value === 'init'),
    canEdit: computed(() => currentState.value === 'init'),
    canCancel: computed(() => currentState.value === 'adding' || currentState.value === 'editing'),
    canSave: computed(() => currentState.value === 'adding' || currentState.value === 'editing'),
    canDelete: computed(() => currentState.value === 'init'),
    canSubmit: computed(() => currentState.value === 'init'),
    canRetrieve: computed(() => currentState.value === 'init')
};

const items = [
    { id: 'add', text: '新增', onClick: executeMethod, enable: status.canAdd },
    { id: 'edit', text: '编辑', onClick: executeMethod, enable: status.canEdit },
    { id: 'cancel', text: '取消', onClick: executeMethod, enable: status.canCancel },
    {
        id: 'save',
        text: '保存',
        onClick: executeMethod,
        enable: status.canSave,
        children: [
            { id: 'addNewAfterSave', text: '保存并新增', onClick: executeMethod, enable: status.canSave },
            { id: 'submitAfterSave', text: '保存并提交', onClick: executeMethod, enable: status.canSave }
        ]
    },
    { id: 'delete', text: '删除', onClick: executeMethod, enable: status.canDelete },
    { id: 'submit', text: '提交审批', onClick: executeMethod, enable: status.canSubmit },
    { id: 'retrieve', text: '取消提交审批', onClick: executeMethod, enable: status.canRetrieve }
];
</script>
<template>
    <f-response-toolbar :items="items" @click="onClickToolbarItem"></f-response-toolbar>
</template>
